<script setup >
import { ref, getCurrentInstance, reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import { useMetadataStore } from "@/store/MetadataStore";
const { proxy } = getCurrentInstance();
const store = useMetadataStore();

// Button
const getMetadataLoading = ref(false);

// tableData
const rowSelection = reactive({
  type: "checkbox",
  showCheckedAll: true,
});
const tableColumns = ref([]);

const getMetadata = () => {
  getMetadataLoading.value = true;
  store.getMdlist().then((data) => {
    let list = store.mdlist;
    let mdSample = list[0];
    tableColumns.value.length = 0;
    Object.keys(mdSample).forEach((k) => {
      if (!Array.isArray(mdSample[k]))
        tableColumns.value.push({
          title: k,
          dataIndex: k,
          slotName: k,
          ellipsis: true,
          tooltip: true,
        });
    });
    // 操作按钮
    tableColumns.value.push({
      title: "Columns",
      slotName: "optional",
    });
    // tableName过滤器
    tableColumns.value.find((it) => (it.dataIndex = "tableName")).filterable = {
      filter: (value, record) => record.tableName.includes(value),
      slotName: "tableName-filter",
    };
    console.log("tableColumns", tableColumns);
    getMetadataLoading.value = false;
  });
  // .thenReply((reply)=>{
  //   let list = store.mdlist
  // let mdSample = list[0]
  // tableColumns.value.length = 0
  // Object.keys(mdSample).forEach(k => {
  //   if(!Array.isArray(mdSample[k]))
  //   tableColumns.value.push({
  //     title: k,
  //     dataIndex: k,
  //     slotName: k,
  //     ellipsis: true,
  //     tooltip: true,
  //   })
  // });
  // // 操作按钮
  // tableColumns.value.push({
  //   title: 'Columns',
  //   slotName: 'optional',
  // })
  // // tableName过滤器
  // tableColumns.value.find(it=>it.dataIndex = "tableName").filterable = {
  //   filter: (value, record) => record.tableName.includes(value),
  //   slotName: 'tableName-filter'
  // }
  // console.log('tableColumns',tableColumns)
  // getMetadataLoading.value = false
  // });
};
const onCopySucc = () => {
  // console.log('md',store.mdlist,store.mdlist.value)
  let selected = store.selectedMDlist();
  // console.log('selected',selected)

  let container = proxy.$refs.container;
  proxy.$copyText(JSON.stringify(selected), container);
  Message.success("复制成功");
};

// form
const form = reactive({
  packagePath: "",
});

const batchReplacePackagePath = () => {
  store.selectedMDlist().forEach((e) => {
    e.packagePath = form.packagePath;
  });
};

// modal
const visible = ref(false);
const currModal = reactive({
  title: "",
  modalColumns: [],
  data: [],
});
const showModal = (record) => {
  visible.value = true;
  currModal.title = record.tableName;

  let list = record.columns;
  if (!list && list.lenght < 1) return;

  let colSample = list[0];
  currModal.modalColumns.length = 0;
  Object.keys(colSample).forEach((k) => {
    if (!Array.isArray(colSample[k]))
      currModal.modalColumns.push({
        title: k,
        dataIndex: k,
        slotName: k,
        ellipsis: true,
        tooltip: true,
      });
  });

  currModal.data = record;
};
const handleOk = () => {
  visible.value = false;
};

const allSelected = (checked) => {
  if (checked)
    store.mdTableSelectedKeys = store.mdlist.map((md) => md.tableName);
  else store.mdTableSelectedKeys = [];
};
</script>

<template>
  <div className="layout-basic-demo" class="border">
    <a-layout>
      <a-layout-header>
        <a-space>
          <a-button
            type="primary"
            status="success"
            @click="getMetadata"
            :loading="getMetadataLoading"
            >获取元数据</a-button
          >
          <a-button type="primary" @click="onCopySucc">copyJson</a-button>
        </a-space>
      </a-layout-header>
      <a-layout-content>
        <a-divider />
        <a-form :model="form">
          <a-row :gutter="16">
            <a-col :span="16">
              <a-form-item
                field="packagePath"
                label="packagePath"
                label-col-flex="100px"
              >
                <a-input
                  v-model="form.packagePath"
                  placeholder="please enter packagePath..."
                >
                  <template #append>
                    <a-button @click="batchReplacePackagePath">批量</a-button>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-switch @change="allSelected">
          <template #checked> 全选 </template>
          <template #unchecked> 全不选 </template>
        </a-switch>
        <a-table
          :data="store.mdlist"
          row-key="tableName"
          :columns="tableColumns"
          :row-selection="rowSelection"
          v-model:selectedKeys="store.mdTableSelectedKeys"
          :scroll="{ x: '100%', y: '100%' }"
          :pagination="{ pageSize: 5 }"
        >
          <template
            #tableName-filter="{
              filterValue,
              setFilterValue,
              handleFilterConfirm,
              handleFilterReset,
            }"
          >
            <div class="custom-filter">
              <a-space direction="vertical">
                <a-input
                  :model-value="filterValue[0]"
                  @input="(value) => setFilterValue([value])"
                />
                <div class="custom-filter-footer">
                  <a-button @click="handleFilterConfirm">筛选</a-button>
                  <a-button @click="handleFilterReset">清空</a-button>
                </div>
              </a-space>
            </div>
          </template>

          <template #packagePath="{ record }">
            <a-input v-model="record.packagePath" />
          </template>

          <template #optional="{ record }">
            <a-button @click="showModal(record)">option</a-button>
          </template>
        </a-table>
      </a-layout-content>
    </a-layout>

    <a-modal
      width="auto"
      v-model:visible="visible"
      hideCancel
      @ok="handleOk"
      okText="完成"
    >
      <template #title>
        {{ currModal.title }}
      </template>
      <div>
        <a-table
          :data="currModal.data.columns"
          row-key="columnName"
          :columns="currModal.modalColumns"
          :row-selection="rowSelection"
          v-model:selectedKeys="currModal.data.colunmSelectedKeys"
          :scroll="{ x: '100%', y: '100%' }"
          :pagination="{ pageSize: 5 }"
        >
          <template #ifID="{ record }">
            <a-checkbox v-model="record.ifID" value="true"></a-checkbox>
          </template>
          <template #ifInBaseModel="{ record }">
            <a-checkbox
              v-model="record.ifInBaseModel"
              value="true"
            ></a-checkbox>
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<style scoped>
.border {
  border: solid 1px white;
}
.custom-filter {
  padding: 20px;
  background: var(--color-bg-5);
  border: 1px solid var(--color-neutral-3);
  border-radius: var(--border-radius-medium);
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
}

.custom-filter-footer {
  display: flex;
  justify-content: space-between;
}
</style>